<template>
  <div class="my-tag">
    <input
      v-focus
      v-if="edit"
      class="input"
      type="text"
      placeholder="输入标签"
      @blur="handleBlur"
      @keyup.enter="handleKeyup"
      v-model.trim="tag"
    />
    <div v-else class="text" @dblclick="handleDblClick">{{ value }}</div>
  </div>
</template>

<script>
/**
 * 双击显示功能
 *  1. 注册双击事件 dblclick = double click - 双击
 *      业务逻辑 就是显示input框
 *  2. 显示input框 div茶具隐藏
 *         提供数据edit（编辑 - 默认false）控制显示隐藏
 *        互斥 v-if 和 v-else
 *  input自动聚焦
 *  1. 自定义指令 input上加v-focus
 *  2. 局部注册
 *          directives: {
 *              focus: {
 *                  inserted(el){...}
 *              }
 *          }
 *  失去焦点自动隐藏 - 回车后隐藏
 *  1. input失去焦点 blur - 处理隐藏逻辑
 *  2. input回车+修饰符 keyup.enter - 处理隐藏逻辑
 *
 *  编辑功能说明
 *  显示input框后
 *      如果输入好 按回车那就是确认修改
 *      如果失去焦点 就不修改使用默认的标签
    两个数据区分：

    - 注意1：输入框内显示的，是my-tag子组件内的数据
        自己声明数据tag， 注意要写在data函数里，不要重复写data函数 会报错
        用于双向数据绑定input框 - 看下双向数据绑定 vue插件是不是数据视图同步
        回显 显示父传子过来的标签的值（value）

    - 注意2：文本标签显示的，是父组件传递过来的数据
        父传子 接受父组件传过来的数据 
        子组件接受 props
        在哪里用 template div（v-else这个div） 渲染对应的标签的内容

    编辑回车提交
        1. 首尾空格去除 修饰符trim
        2. 如果标签内容为空 做个判断 给个默认字符串 - 暂无 
        3. 修改数据 由于要改父组件的数据 在子组件不能直接修改
                子传父 
                由于v-model语法糖，所以自定义的事件名取input 
        4. 直接使用v-model改写        
 */
export default {
  name: "MyTag",
  props: {
    value: {
      type: String,
      required: true,
    },
  },
  directives: {
    focus: {
      inserted(el) {
        // console.log(el);
        el.focus();
      },
    },
  },
  data() {
    return {
      edit: false,
      tag: "",
    };
  },
  methods: {
    handleKeyup() {
      // 加上enter意思是回车然后确认提交数据隐藏input框 把edit改成false
      // 需要处理提交数据
      if (!this.tag) {
        this.tag = "暂无";
      }
      //   console.log(this.tag);
      this.$emit("input", this.tag);
      // 隐藏input
      this.edit = false;
    },
    handleBlur() {
      // 失去焦点后 显示标签 而不是input（在编辑） - 隐藏的话就把edit改成false
      this.edit = false;
    },
    handleDblClick() {
      // 显示input框
      this.edit = true;
      // 做回显 需要把tag值赋值 回显父组件传来的数据
      this.tag = this.value;
    },
  },
};
</script>

<style lang="less" scoped>
.my-tag {
  cursor: pointer;
  .input {
    appearance: none;
    outline: none;
    border: 1px solid #ccc;
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
    color: #666;
    &::placeholder {
      color: #666;
    }
  }
}
</style>